<template>
	<view class="two">
		<view class="two_one u-flex">
			<view class="two_one_one" v-for="(item,index) in classify.slice(0,4)" :key="index">
				<image :src="item.image" mode=""></image>
				<view class="two_title">{{item.title}}</view>
			</view>
		</view>
		<view class="two_one u-flex">
			<view class="two_one_one" v-for="(item,index) in classify.slice(4,8)" :key="index">
				<image :src="item.image" mode=""></image>
				<view class="two_title">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"classify": [{
						"id": 1,
						"image": "../../static/qianbi.png",
						"title": "书写工具",
					},
					{
						"id": 2,
						"image": "../../static/jiaoshui.png",
						"title": "胶黏用品",
					},
					{
						"id": 3,
						"image": "../../static/dsj.png",
						"title": "桌面文具",
					},
					{
						"id": 4,
						"image": "../../static/benzi.png",
						"title": "纸品本册",
					},
					{
						"id": 5,
						"image": "../../static/dyj.png",
						"title": "打印工具",
					},
					{
						"id": 6,
						"image": "../../static/phone.png",
						"title": "办公生活",
					},
					{
						"id": 7,
						"image": "../../static/dangan.png",
						"title": "文管产品",
					},
					{
						"id": 8,
						"image": "../../static/yanliao.png",
						"title": "美术画材",
					},
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.two {
		width: 700rpx;
		margin: 0rpx auto;
		background-color: #ffffff;
		border-radius: 20rpx;

		.two_one>view {
			margin: 20rpx auto;

			.two_one_one {
				margin: 0 auto;
			}
		}

		image {
			width: 72rpx;
			height: 72rpx;
			// padding-left: 5rpx;
			border-radius: 50%;
		}

		.two_title {
			// text-align: center;
			font-size: 22rpx;
		}
	}
</style>
